<template>
  <view class="main-header">
    <text>{{ $t("产品分析") }}</text>
  </view>
  <view class="main-pingfen">
    <view class="identifylabelids-button">
      <view class="identifylabelids-button-item">
        <uv-button :custom-style="miniButton" :color="yellow_selected === p.id ? '#748ee2' : '#aaaaaa'" text="概览"
          @click="yellow_selected = p.id">
        </uv-button>
      </view>
      <view v-for="(v, i) in yellowlist" :key="i" class="identifylabelids-button-item">
        <uv-button :custom-style="miniButton" :color="yellow_selected === v.id ? '#748ee2' : '#aaaaaa'" :text="v?.name"
          @click="yellow_selected = String(v.id)"></uv-button>
      </view>
    </view>
  </view>
  <view class="container">
    <slot class="container" :show="show && showyellow" id="mychart-dom-yellow" canvasId="mychart-yellow"
      :ec="{ onInit: (canvas: any, width: string | number, height: string | number, dpr: number) => setyellow(canvas, width, height, dpr) }">
    </slot>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, shallowRef, watch } from "vue";
import { miniButton } from "@/util/style";
import { nextTick } from "vue";
//@ts-ignore
const echarts = require("../../wxcomponents/ec-canvas/echarts");
import { getchildrenlast } from "@/util";
import { navigateTo } from "@/util/navigator";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
interface Ip {
  id: string;
  list: Eps.identifylabelEntity[];
  change(
    identifycommentlabels: string[],
    p?: number,
    d?: number
  ): {
    xAxisdata: string[];
    name: string[];
    series: {
      value: number;
      type: string;
      date: string;
      name: string;
      color: string;
    }[][];
    data: {
      value: number;
      type: string;
      date: string;
      name: string;
      color: string;
    }[];
    parent: {
      count: number;
      name: string;
      id1: string | undefined;
      id2: string | undefined;
      value: number;
    }[];
    parent2: {
      count: number;
      name: string;
      id1: string | undefined;
      id2: string | undefined;
      value: number;
    }[];
  };
  show: boolean;
  shopdata: any[];
  _feedbackTime: string[];
  feedbackTime: string[];
};
const $t = useI18n().t;

const p = withDefaults(defineProps<Ip>(), {
  list: () => [],
});

const showyellow = ref(true);
const yellow_identifycommentlabels = ref<string[]>([]);

const yellow_selected = ref<string>(p.id);

const yellowlist = computed(() => {
  const data = p.list.find(z => String(z.id) === yellow_selected.value)?.children?.sort((a: any, b: any) => Number(a.orderNum) - Number(b.orderNum));
  return data || [];
});
const chart = shallowRef();

function setyellow(
  canvas: any,
  width: string | number,
  height: string | number,
  dpr: number
) {
  chart.value = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });

  chart.value.setOption(setoption(), { notMerge: true });
  canvas.setChart(chart.value);
  chart.value.on("click", click);
  return chart.value;
}

function setoption() {
  yellow_identifycommentlabels.value = getchildrenlast(
    p.list.find((c) => String(c.id) === yellow_selected.value)?.children
  ).map((e) => e.id);
  const option: Record<string, any> = {
    color: [
      "#FD754C",
      "#cccccc",
      "#ee5253",
      "#5f27cd",
      "#10ac84",
      "#feca57",
      "#f368e0",
      "#00d2d3",
      "#341f97",
      "#576574",
    ],
    legend: {
      top: "top",
      left: "left",
      data: ["当前周期", "上一周期"],
      selected: {
        "上一周期": false  // 将 "Lowest" 设置为默认不选中
      }
    },
    title: false,
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      show: false,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "当前周期",
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
      {
        name: "上一周期",
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        sort: "descending",
        label: {
          show: false
        }
      },
    ],
  };
  if (yellow_selected.value === p.id) {
    const { parent, parent2 } = p.change(
      yellow_identifycommentlabels.value,
      1,
      0
    );
    option.xAxis.data = parent.map((e) => e.name);
    option.series = [
      {
        name: "当前周期",
        type: "bar",
        data: parent.map((e) => e.value),
        sort: "descending",
        realtimeSort: true,
        label: {
          show: true,
          formatter: (value: any) => {
            if (value.value) {
              return value.name.split("").join("\n");
            }
            return "";
          },
          verticalAlign: "bottom",
          align: "left",
          position: "bottom",
          distance: -10,
          offset: [-5, 0],
          textBorderWidth: 0,
          textShadowBlur: 0,
        },
      },
      {
        name: "上一周期",
        type: "bar",
        data: parent2.map((e) => e.value),
        label: {
          show: true,
          formatter: (value: any) => {
            if (value.value) {
              return value.name.split("").join("\n");
            }
            return "";
          },
          verticalAlign: "bottom",
          align: "left",
          position: "bottom",
          distance: -10,
          offset: [-5, 0],
          textBorderWidth: 0,
          textShadowBlur: 0,
        },
      },
    ];
  } else {
    const { xAxisdata, series } = p.change(
      yellow_identifycommentlabels.value,
      2,
      0
    );
    option.xAxis.data = series[0].map(
      (e) => e?.name
    );
    option.series = [
      {
        name: "当前周期",
        type: "bar",
        data: series[0],
        markArea: null,
        sort: "descending",
        realtimeSort: true,
        label: {
          show: true,
          formatter: (value: any) => {
            if (value.value) {
              return value.name.split("").join("\n");
            }
            return "";
          },
          verticalAlign: "bottom",
          align: "left",
          position: "bottom",
          distance: -10,
          offset: [-5, 0],
          textBorderWidth: 0,
          textShadowBlur: 0,
        },
      },
      {
        name: "上一周期",
        type: "bar",
        data: series[1],
        label: {
          show: true,
          formatter: (value: any) => {
            if (value.value) {
              return value.name.split("").join("\n");
            }
            return "";
          },
          verticalAlign: "bottom",
          align: "left",
          position: "bottom",
          distance: -10,
          offset: [-5, 0],
          textBorderWidth: 0,
          textShadowBlur: 0,
        },
      },
    ];
  }
  return option;
}
function click(e: any) {
  if (e.componentSubType == "bar") {
    const n = p.list.find(
      (z) => String(z.parentId) === yellow_selected.value && z.name === e.name
    );
    console.log(n);
    if (n?.children?.length) {
      yellow_selected.value = String(n.id);
    } else {
      const identifylabelid = [n?.id];
      const _shopdata = p.shopdata.filter((z) =>
        identifylabelid.includes(z.identifylabelid)
      );
      uni.setStorageSync("shopdata", JSON.stringify(_shopdata));
      navigateTo(
        `/pages/publicsentiment/shopdata?type=ai&starttime=${p._feedbackTime[0]
        }&endtime=${dayjs(p.feedbackTime[1]).format(
          "YYYY-MM-DD"
        )}&identifylabelid=${identifylabelid.join(",")}`
      );
    }

  }
}

watch(
  () => yellow_selected.value,
  () => {
    const children = p.list.find((c) => String(c.id) === yellow_selected.value)?.children || []

    if (children?.length) {
      nextTick(() => {
        chart.value.setOption(setoption(), { notMerge: true });
      });
    }

  }
);
</script>
